<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<title>登录网页源码</title>

		<meta name="keywords" content="登录网页源码" />

		<meta name="description" content="最全的登录网页源码下载网站http://cn.inspinia.cn" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/jquery.min.js"></script>
		<script src="js/skycons.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
	</head>
	<body onload="test()">
		<h1>Multi Column Widget</h1>
		<div id="loginDiv" class="main-agileits">
			<div class="sign-in-wthree">
				<div class="sign-in-top-agileinfo">
					<h2>Sign In</h2>
					<p>Your info is safe here</p>
				</div>
				<div class="sign-in-bottom-agileinfo">
					<form action="javascript:void(0);" method="post">
						<h3>User Name</h3>
						<input type="text" v-model="user.userName" required="required" />
						<h3>Password</h3>
						<input type="password" v-model="user.password" required=" " />
						<input type="submit" @click="login()" value="Sign In" />
						<p>Forgot Password?</p>
						<a href="#">Click Here</a>
					</form>
				</div>
			</div>
		</div>
		<div class="footer-agileits-w3layouts">
			<p class="agileinfo">
				&copy; 2016 Multi Column Widget . All Rights Reserved | Design by
				<a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a>
			</p>
		</div>

		<script>
			var loginVue = new Vue({
				el: "#loginDiv",
				data: {
					user: {
						userName: "",
						password: "",
					},
				},
				methods: {
					login: function () {
						if (this.user.userName == "" || this.user.password == "") {
							alert("请输入用户名和密码。");
							return;
						}

						var self = this;
						$.ajax({
							url: "http://www.sfac.xyz/api/login",
							type: "post",
							contentType: "application/json",
							data: JSON.stringify(self.user),
							success: function (rs) {
								if (rs.status == 200) {
									location.href = "index_jquery.html";
								} else {
									alert(rs.message);
								}
							},
							error: function (rs) {
								console.log(rs);
							},
						});
					},
				},
			});
		</script>
	</body>
</html>
